@import "index";
$max-width: 800px;
$max-height: 600px;
@mixin selected {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    border-left: 1px solid #e8e8e8;
    >ul {
        margin-top: 2px;
        flex: 1;
        >li {
            font-size: 12px;
            height: 35px;
            display: flex;
            align-items: center;
            position: relative;
            >span.label {
                flex: 1;
                background: $assist-color;
                color: white;
                padding: 6px 28px 6px 8px;
                border-radius: 2px;
            }
            >span.icon-x {
                position: absolute;
                right: 0;
                padding: 3px;
                margin-right: 5px;
                border-radius: 10px;
                color: white;
                &:hover {
                    transition: all .4s;
                    background: lighten($assist-color, 15%);
                }
            }
        }
    }
}

nm-findback {
    display: flex;
    justify-content: start;
    >.selected {
        @include selected;
        border-left: 0;
        padding-left: 0;
        margin-left: 6px;
        flex-direction: row;
        >ul {
            margin-top: 0;
            display: flex;
            flex-wrap: wrap;
            >li {
                height: inherit;
                margin: 2px;
            }
        }
    }
    nm-button {
        margin: 2px;
    }
}

nm-modal.findback {
    max-width: $max-width;
    max-height: $max-height;
    >article {
        display: flex;
        flex-direction: column;
        >.content {
            display: flex;
            >nm-tree {
                min-width: 180px;
                display: inline-block;
                margin-right: 15px;
                padding-right: 15px;
                border-right: 1px solid #e8e8e8;
                max-height: $max-height - 65;
                overflow: auto;
            }
            >nm-table {
                >table {
                    max-height: $max-height - 95;
                    overflow: auto;
                }
            }
            >.selected {
                margin-left: 15px;
                @include selected;
                >ul {
                    max-height: $max-height - 97;
                    overflow: auto;
                }
            }
            >nm-toolbar {
                margin-top: 15px;
                justify-content: flex-end;
            }
            &.tree {
                >nm-tree {
                    ul>li {
                        >a>label {
                            display: flex;
                            justify-content: space-between;
                        }
                    }
                }
                >.selected {
                    margin-left: 0;
                    padding-left: 0;
                    border-left: 0;
                }
            }
        }
        >nm-toolbar {
            margin-top: 15px;
            justify-content: flex-end;
        }
    }
}